import React ,{useState} from 'react'
import { Row, Col, List, Avatar, Card,Skeleton,Tag,Divider } from 'antd';
import { WechatOutlined,QqOutlined,GithubOutlined } from '@ant-design/icons';
import './business.less'

const BusinessCard = ()=>{ 

    const [loading, setstate] = useState(false);

    return(
        <Card className='userinfo'>
        <Skeleton loading={loading}>
          <Card.Meta
            avatar={
              <Avatar 
              size={64}
              src="https://avatar.csdnimg.cn/5/0/E/0_qq_44606064_1584959716.jpg"/>
            }
            title="编程小飞"
            description={
                <div>
                <span>不怕bug，勇于钻研</span>
                <div className='userTag' style={{marginTop:'.4rem'}}>
                    <Tag color="green">全栈</Tag>
                    <Tag color="geekblue">IT</Tag>
                    <Tag color="purple">技术专家</Tag>
                </div>
                </div>
            }
          />
          <Divider className='test1'>社交账号</Divider>
          <div className="socal-contact">
            <span className='socal-contact-item'><QqOutlined /></span>
            <span className='socal-contact-item'><WechatOutlined /></span>
            <span className='socal-contact-item'><GithubOutlined /></span>
            <span className='iconfont icon-gitee-fill-round socal-contact-item'></span>
            <span className='iconfont icon-csdn socal-contact-item'></span>
          </div>
        </Skeleton>
      </Card>    
    )
}

export default BusinessCard